<template>
	<view>
		<view class="bigBox">
			<view class="infoBox">
				<view class="userInfo">
					<image class="userIcon" :src="avatar"></image>
					<view class="box">
						<view class="nameBox">
							<view class="name">
								{{name}}
							</view>
						</view>
						<view class="sexBox">
							业务员ID:{{data.id}} 丨 <text v-if="sex==1">男</text><text v-else-if="sex==2">女</text><text
								v-else>保密</text>
						</view>
					</view>
				</view>
				<image @click="bigImg" class="codeImg" src="@/static/images/icon/code.png"></image>
			</view>
			<view class="otherBox">
				<view class="otherLi" @click="toEmbody">
					<view class="price">
						￥{{(data.brokeragePrice/100).toFixed(2) || 0.00}}
					</view>
					<view class="liTxt">
						我的余额
					</view>
				</view>
				<view class="otherLi">
					<view class="price">
						￥{{(data.withdrawPrice/100).toFixed(2) || 0.00}}
					</view>
					<view class="liTxt">
						已提现
					</view>
				</view>
				<view class="otherLi" @click="showCount">
					<view class="price">
						{{data.withdrawCount || 0}}次
					</view>
					<view class="liTxt">
						提现次数
					</view>
				</view>
				<view class="otherLi">
					<view class="price">
						{{data.customerCount || 0}}家
					</view>
					<view class="liTxt">
						我的商家
					</view>
				</view>
			</view>
		</view>
		<view class="helde">
			<view class="title">
				更多功能
			</view>
			<view class="otherLi2" @click="toProfit">
				<image class="otherImg" src="@/static/images/work/profit.png"></image>
				<view class="otherTxt">
					我的收益
				</view>
			</view>
		</view>
		<u-popup :show="show" mode="center" :round="10" @close="close" @open="open">
			<view class="pupBox">
				<view class="nav">
					<u-tabs :current="check - 1" :itemStyle="{ width:'20%',height:'80rpx'}"
						:activeStyle="{ color: '#E84E22' , fontSize:'24rpx' }" lineColor='#E84E22'
						:inactiveStyle="{ color: '#666666',fontSize: '24rpx' }" :list="list1" @click="click"></u-tabs>
				</view>
				<view class="pupDataBox">
					<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="scrolltolower">
						<view class="uListLi" v-for="(item, index) in indexList" :key="index">
							<view class="li">
								<view class="liTime">
									<view class="txt1">
										{{parseTime(item.createTime)}}
									</view>
									<view class="txt">
										￥{{(item.price/100).toFixed(2)}}
									</view>
								</view>
								<view class="liPrice" v-if="item.status==10 || item.status==11" @click="previewImg(item.withdrawReceiptUrl)">
									查看回执
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getWorkInfo,
		brokerageWithdraw
	} from "@/api/work/work.js"
	import {
		parseTime
	} from "@/utils/ruoyi"
	export default {
		name: "staffMine",
		data() {
			return {
				avatar: '',
				id: '',
				name: '',
				data: {},
				orderType: '',
				show: false,

				check: 1,
				list1: [{
					name: '全部',
					type: 1
				}, {
					name: '审核中',
					type: 2
				}, {
					name: '审核通过',
					type: 3
				}, {
					name: '提现成功',
					type: 4
				}, {
					name: '审核不通过',
					type: 5
				}, {
					name: '提现失败',
					type: 6
				}],
				pageNum: 1,
				indexList: [],
				listnum: 0,
			};
		},
		activated() {
			console.log('当前组件被激活：显示')
		},
		created() {
			this.avatar = this.$store.getters.avatar
			let id = this.$store.getters.id
			if (id) {
				this.id = id
			}
			let sex = this.$store.getters.sex
			if (sex) {
				this.sex = sex
			} else {
				this.sex = 3
			}
			this.name = this.$store.getters.name
			// console.log('头像',this.avatar)
			this.getInfo()
			uni.$on('emit', res => {
				if (res == 1) {
					this.getInfo()
				}
			})

		},
		destroy() {
			uni.$off('emit')
		},
		methods: {
			//时间处理
			parseTime(time) {
				return parseTime(time)
			},
			//跳转我的收益
			toProfit() {
				this.$tab.navigateTo('/pagesA/profit/profit')
			},
			//跳转提现
			toEmbody() {
				this.$tab.navigateTo('/pagesA/embody/embody')
			},
			bigImg() {
				this.$tab.navigateTo('/pagesA/staffCode/staffCode')
			},
			//获取业务员交易信息
			getInfo() {
				let that = this
				uni.showLoading({
					title: '加载中'
				})
				getWorkInfo().then(res2 => {
					if (res2.code == 0) {
						uni.hideLoading()
						that.data = res2.data
					}
				})
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			click(e) {
				// console.log(e.type)
				if(e.type==1){
					this.orderType = ''
				}
				if(e.type==2){
					this.orderType = 0
				}
				if(e.type==3){
					this.orderType = 10
				}
				if(e.type==4){
					this.orderType = 11
				}
				if(e.type==5){
					this.orderType = 20
				}
				if(e.type==6){
					this.orderType = 21
				}
				this.listnum = 0
				this.pageNum = 1
				this.indexList = []
				this.showCount()
			},
			scrolltolower() {
				// console.log('xiayiiye')
				if(this.listnum == this.indexList.length){
					uni.showToast({
						icon:'none',
						title:'没有更多了'
					})
				}else{
					this.pageNum = this.pageNum + 1
					this.showCount();
				}
			},
			showCount() {
				let that = this
				uni.showLoading({
					title: '加载中'
				})
				let data = {
					status: that.orderType,
					pageNo: that.pageNum,
					pageSize: 10,
				}
				brokerageWithdraw(data).then(res => {
					uni.hideLoading()
					that.listnum = res.data.total
					if (that.indexList.length < res.data.total) {
						that.indexList = that.indexList.concat(res.data.list)
					}
					that.show = true
				})
			},
			//预览生成的海报图片
			previewImg(url) {
				if (!url) return
				uni.previewImage({
					urls: [url]
				})
			}
		}
	}
</script>

<style>
	.bigBox {
		width: 750rpx;
		height: 540rpx;
		background-color: #fff;
		overflow: hidden;
	}

	.infoBox {
		width: 630rpx;
		height: 160rpx;
		margin: 210rpx auto 0 auto;
		/* background-color: red; */
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.userInfo {
		width: 500rpx;
		height: 160rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.userIcon {
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
		overflow: hidden;
		background-color: #999999;
	}

	.box {
		width: 300rpx;
		height: 100rpx;
	}

	.nameBox {
		width: 300rpx;
		height: 50rpx;
		margin: 0 auto;
		line-height: 50rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.name {
		max-width: 250rpx;
		height: 50rpx;
		font-weight: bold;
		font-size: 32rpx;
		color: #333333;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.alter {
		width: 28rpx;
		height: 28rpx;
		margin-left: 20rpx;
	}

	.sexBox {
		width: 300rpx;
		height: 50rpx;
		line-height: 50rpx;
		margin: 0 auto;
		font-size: 20rpx;
		color: #999999;
	}

	.codeImg {
		width: 68rpx;
		height: 68rpx;
	}

	.otherBox {
		width: 630rpx;
		height: 140rpx;
		margin: 30rpx auto 0 auto;
		display: flex;
		justify-content: space-between;
	}

	.otherLi {
		width: 150rpx;
		height: 100rpx;
	}

	.price {
		width: 150rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		font-weight: bold;
		font-size: 32rpx;
		color: #333333;
	}

	.liTxt {
		width: 150rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		font-size: 24rpx;
		color: #333333;
	}

	.helde {
		width: 690rpx;
		height: 192rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 30rpx auto;
	}

	.title {
		width: 630rpx;
		height: 50rpx;
		line-height: 50rpx;
		margin: 30rpx auto;
		font-weight: bold;
		font-size: 32rpx;
		color: #333333;
	}

	.otherLi2 {
		width: 630rpx;
		height: 108rpx;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.otherImg {
		width: 48rpx;
		height: 48rpx;
	}

	.otherTxt {
		width: 550rpx;
		height: 108rpx;
		line-height: 108rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
	}

	/* 弹出层 */
	.pupBox {
		width: 630rpx;
		height: 800rpx;
		margin: 30rpx 20rpx;
		/* background-color: red; */
	}

	.nav {
		width: 630rpx;
		height: 100rpx;
	}

	.pupDataBox {
		width: 630rpx;
		height: 680rpx;
		margin-top: 20rpx;
		overflow: hidden;
		/* background-color: aqua; */
	}

	.scroll-Y {
		width: 630rpx;
		height: 680rpx;
	}

	.uListLi {
		width: 630rpx;
		/* height: 300rpx; */
	}
	.li {
		width: 600rpx;
		height: 102rpx;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
	}
	
	.liTime {
		width: 450rpx;
		height: 102rpx;
		line-height: 102rpx;
		font-size: 28rpx;
		color: #333333;
		display: flex;
	}
	
	.liImg {
		width: 15rpx;
		height: 24rpx;
		display: block;
		margin-left: 10rpx;
		transform: rotate(90deg);
	}
	
	.liPrice {
		width: 150rpx;
		height: 102rpx;
		line-height: 102rpx;
		text-align: center;
		font-size: 24rpx;
		color: blue;
	}
	
	.other {
		width: 750rpx;
		height: 30rpx;
		line-height: 30rpx;
		font-size: 20rpx;
		color: #999999;
		margin-top: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.txt1{
		width: 300rpx;
		overflow: hidden; /*超出部分隐藏*/
		white-space: nowrap; /*禁止换行*/
		text-overflow: ellipsis; /*省略号*/
		margin-right: 10rpx;
	}
</style>